// 跳转到图书详情页
function goToBookDetail(id) {
    window.location.href = `./jinwen-bookDetail.html?id=${id}`;
}

fetch("https://app2.motie.com/pc/home?type=5").then(res=> res.json()).then(res1=> {

    //本周强推
    res1.data.strongPush.templateList.forEach(item => {
        const ul1=document.querySelector('.boxlist')
        ul1.innerHTML+=`
            <li>
                <div class="shelf-box" data-Id="${item.id}" onclick="goToBookDetail(${item.id})">
                    <span>「${item.content}」</span>
                    ${item.name}
                </div>
            </li>
        `
    });

    //轮播
    const swiper1=document.querySelector('.swiper-wrapper')
    res1.data.slide.templateList.forEach(item => {
        swiper1.innerHTML+=`
            <div class="swiper-slide">
                <img src="${item.imgUrl}" alt="">
            </div>
        `
    });
    initSwiper();

    //明星作家秀
    const bannerRight=document.querySelector('.banner-right')
    const a1=res1.data.starWriterShow.shelfName;
    const a2=res1.data.starWriterShow.templateList[0]
    bannerRight.innerHTML=`
        <span class="ft-1">${a1}</span>
        <span class="ft-2">${a2.authorName}</span>
        <span class="ft-3"></span>
        <span class="ft-4">代表作</span>
        <span class="ft-5">
            <em data-Id="${a2.id}" onclick="goToBookDetail(${a2.id})">${a2.name}</em>
        </span>
        <span class="ft-6">${a2.content}</span>
        <div class="pic-1">
            <div class="book-cover">
                <img data-Id="${a2.id}" onclick="goToBookDetail(${a2.id})" src="${a2.imgUrl}" alt="">
                <span></span>
            </div>
        </div>
    `

    //热门推荐
    const ul2=document.querySelector('.sec-ul')
    res1.data.hotRecommend.templateList.forEach(item => {
        ul2.innerHTML+=`
            <li data-Id="${item.id}" onclick="goToBookDetail(${item.id})">
                <div class="shelf-box">
                    <img src="${item.imgUrl}" alt="">
                </div>
                <div class="bookdetail">
                    <p class="booktitle">${item.name}</p>
                    <p class="hname">${item.content}</p>
                </div>
            </li>
        `
    })

    //最新动态
    const ul3=document.querySelector('.third-ul')
    res1.data.newRecent.templateList.forEach(item => {
        ul3.innerHTML+=`
            <li>
                <p>${item.name}</p>
            </li>
        `
    })

    //最新动态底部图片
    const index1=document.querySelector('.index-ad-r')
    const img1=res1.data.recentDynamicPic.templateList[0]
    index1.innerHTML=`
        <img src="${img1.imgUrl}" alt="">
    `

    //精品推荐
    const listbook=document.querySelector('.listbook')
    res1.data.vipRecommend.templateList.forEach(item => {
        listbook.innerHTML+=`
            <div class="listbook1">
                <div class="data">
                    <img data-Id="${item.id}" onclick="goToBookDetail(${item.id})" src="${item.imgUrl}" alt="">
                </div>
                <div class="data1">
                    <div class="bookname" data-Id="${item.id}" onclick="goToBookDetail(${item.id})">${item.name}</div>
                    <div class="book-info">${item.content}</div>
                    <div class="book-author">
                        <p>作者:&nbsp;&nbsp;&nbsp;${item.authorName}</p>
                    </div>
                </div>
            </div>
        `
    })

    //最创意旁边的书
    const listbookbox=document.querySelector('.listbookbox')
    res1.data.mostCreative.templateList.forEach(item => {
        listbookbox.innerHTML+=`
            <div class="listbook1">
                <div class="data">
                    <img data-Id="${item.id}" onclick="goToBookDetail(${item.id})" src="${item.imgUrl}" alt="">
                </div>
                <div class="data1">
                    <div class="bookname" data-Id="${item.id}" onclick="goToBookDetail(${item.id})">${item.name}</div>
                    <div class="book-info">${item.content}</div>
                    <div class="book-author">
                        <p>作者:&nbsp;&nbsp;&nbsp;${item.authorName}</p>
                    </div>
                </div>
            </div>
        `
    })

    //最创意
    const topbox1=document.querySelector('.topbox1')
    const a3=res1.data.mostCreativeContent.templateList[0]
    topbox1.innerHTML=`
        <span class="new-orig-menu">
            <img src="./img/w5.png" alt="">
        </span>
        <p class="shelf-box">${a3.content}</p>
    `

    //编辑推荐
    const ul4=document.querySelector('.box1')
    res1.data.editorsRecommend.templateList.forEach(item => {
        ul4.innerHTML+=`
            <li>
                <div class="shelf-box" data-Id="${item.id}" onclick="goToBookDetail(${item.id})">
                    <span>「${item.content}」</span>
                    ${item.name}
                </div>
            </li>
        `
    })

    //影视风向
    const listbookbox2=document.querySelector('.listbookbox2')
    res1.data.filmWinds.templateList.forEach(item => {
        listbookbox2.innerHTML+=`
            <div class="listbook1">
                <div class="data">
                    <img data-Id="${item.id}" onclick="goToBookDetail(${item.id})" src="${item.imgUrl}" alt="">
                </div>
                <div class="data1">
                    <div class="bookname" data-Id="${item.id}" onclick="goToBookDetail(${item.id})">${item.name}</div>
                    <div class="book-info">${item.content}</div>
                    <div class="book-author">
                        <p>作者:&nbsp;&nbsp;&nbsp;${item.authorName}</p>
                    </div>
                </div>
            </div>
        `
    })

    //改编热推
    const ul5=document.querySelector('.box2')
    res1.data.adaptedRecommend.templateList.forEach(item => {
        ul5.innerHTML+=`
            <li>
                <div class="shelf-box" data-Id="${item.id}" onclick="goToBookDetail(${item.id})">
                    <span>「${item.content}」</span>
                    ${item.name}
                </div>
            </li>
        `
    })

    //精品完本
    const ul6=document.querySelector('.box3')
    res1.data.finishBook.templateList.forEach(item => {
        ul6.innerHTML+=`
            <li data-Id="${item.id}" onclick="goToBookDetail(${item.id})">
                <div class="shelf-box">
                    <img src="${item.imgUrl}" alt="">
                </div>
                <div class="bookdetail">
                    <p class="booktitle">${item.name}</p>
                    <p class="hname">${item.content}</p>
                </div>
            </li>
        `
    })

    fetchRecentUpdates(0);
    const tabItems = document.querySelectorAll('.main .seventhbox .skeleftbox .mod-title .title-bd .tab li');
    tabItems.forEach((item, index) => {
        item.addEventListener('mouseenter', () => {
            // 切换激活状态
            tabItems.forEach(i => i.classList.remove('on'));
            item.classList.add('on');
            
            // 切换数据
            currentType = index;
            fetchRecentUpdates(index);
        });
    });

}).catch(err=> {
    console.log(err)
})

function initSwiper() {
    const firstSwiper = new Swiper(".firstSwiper", {
        spaceBetween: 0,
        centeredSlides: true,
        loop: true,
        autoplay: {
            delay: 2000,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".custom-next",
            prevEl: ".custom-prev",
        },
    });
}

let currentType = 0;

const contentAll=document.querySelector('.content-all')
function formatTimestamp(timestamp) {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function fetchRecentUpdates(type) {
    const contentAll = document.querySelector('.content-all');
    fetch(`https://app2.motie.com/pc/recentUpdates?siteType=5&type=${type}`)
    .then(res => res.json())
    .then(res1 => {
        // 清空容器
        contentAll.innerHTML = '';
        // 渲染新数据
        res1.data.forEach(item => {
            const formattedTime = formatTimestamp(item.lastUpdateTime);
            contentAll.innerHTML += `
                <div class="itemclear">
                    <div class="classis">${item.sort}</div>
                    <div class="name" data-Id="${item.bookId}" onclick="goToBookDetail(${item.bookId})">${item.bookName}</div>
                    <div class="newest">${item.chapterName}</div>
                    <div class="author">${item.authorName}</div>
                    <div class="time">${formattedTime}</div>
                </div>
            `;
        });
    })
    .catch(err => {
        console.log(err);
        contentAll.innerHTML = '<div style="text-align: center; padding: 20px;">加载失败，请重试</div>';
    });
}
